<template>
  <div class="container">
    <header>
      <input
        class="iconfont"
        type="text"
        :placeholder="'\ue608  搜索商品名称'"
      />
    </header>
    <main>
        <div class="main-l">
            <ul >
                <li 
                v-for="(v,i) in lists"
                :key="i" 
                @click="gotoList(i)" 
                ><span :class="v.isShow?'on':''" >{{v.type}}</span></li>
            </ul>
        </div>
        <component :is="ZU" :index="myindex" class="main-r" ref="list"></component>
        
    </main>
    <footer>
      <Footerbar />
    </footer>
  </div>
</template>

<script>
import Footerbar from "../../components/Footerbar/Footerbar.vue";
import List from "../../components/List/List.vue";
import {mapState} from 'vuex'

export default {
  name: "Fenlei",
  components: {
    Footerbar,List
  },
  computed:{
    ...mapState(["lists"])
  },
  data() {
    return {
      ZU:'List',
      myindex:0
    }
  },
  methods: {
    gotoList(i){
      this.lists.forEach(item=>{
        item.isShow=false
      })
      this.lists[i].isShow=!this.lists[i].isShow;
      this.myindex=i;
    }
  },
  
};
</script>

<style scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
img{
    width: 100%;
}
main {
  flex: 1;
  overflow-y: auto;
}
.main-l{
    float: left;
    width: .79rem;
    height: 100%;
    overflow-y: auto;
}

.main-l ul li{
    height: .47rem;
    width: .79rem;
    text-align: center;
    font-size: .12rem;
    color: #666666;
    padding-top: .2rem;
}
.main-l ul li span{
    display:inline-block;
    width: .79rem;
    height: .2rem;
}
.main-l ul li .on {
    border-left:3px solid red;
    font-weight: 600;
    color: black;
}
.main-r{
    float: left;
    width: 2.62rem;
    margin-left: .1rem;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

footer{
    height: .52rem;
}
header {
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
}
header input {
  width: 3.41rem;
  height: 0.31rem;
  border: 0;
  border-radius: 0.2rem;
  background-color: #f7f7f7;
  color: #a6a6a6;
  padding-left: 0.2rem;
}

</style>